import React, { memo } from 'react'

import { Slider } from 'antd';

import {
  PlayerWrapper,
  PlayControl,
  PlayInfo,
  PlayOperator
} from './style'

export default memo(function AppPlayerBar() {
  return (
    <PlayerWrapper className="sprite_player">
      <div className="content wrap-v2">
        <PlayControl>
          <button className="sprite_player btn prev"></button>
          <button className="sprite_player btn play"></button>
          <button className="sprite_player btn next"></button>
        </PlayControl>
        <PlayInfo>
          <div className="image">
            <img src="https://p1.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=undefinedxundefined" alt=""></img>
          </div>
          <div className="info">
            <div className="song">
              <span className="song-name">我会想象有一个世界（feat.法老）</span>
              <span className="sing-name">小安迪/法老</span>
            </div>
            <div className="progress">
              <Slider defaultValue={0} />
              <div className="time">
                <span className="now-time">00:00</span>
                <span className="divider">/</span>
                <span className="total-time">00:00</span>
              </div>
            </div>
          </div>
        </PlayInfo>
        <PlayOperator>
          <div className="left">
            <button className="sprite_player btn collect"></button>
            <button className="sprite_player btn share"></button>
          </div>
          <div className="right">
            <button className="sprite_player btn sound"></button>
            <button className="sprite_player btn loop"></button>
            <button className="sprite_player btn playlist"></button>
          </div>
        </PlayOperator>
      </div>
    </PlayerWrapper>
  )
})